<!--  -->
<template @click="">
  <div>
    <div class="oder">
      <cnp>
        <h1 class="title">订单管理</h1>
      </cnp>
      <saixuan>
        <el-input placeholder="输入用户名或手机号......" v-model="inpVal" clearable></el-input>
      </saixuan>
      <div class="Order-main">
        <tit></tit>
        <!-- tabs -->
        <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部订单" name="first">
            <biaotou></biaotou>
            <biao-list :aaa="quan"></biao-list>
          </el-tab-pane>
          <el-tab-pane label="待付款" name="second">
            <biaotou></biaotou>
            <biao-list :aaa="quan"></biao-list>
          </el-tab-pane>
          <el-tab-pane label="学习中" name="third">
            <biaotou></biaotou>
            <biao-list :aaa="quan"></biao-list>
          </el-tab-pane>
          <el-tab-pane label="已完成" name="fourth">
            <biaotou></biaotou>
            <biao-list :aaa="quan"></biao-list>
          </el-tab-pane>
          <el-tab-pane label="已关闭" name="fifth">
            <biaotou></biaotou>
            <biao-list :aaa="quan"></biao-list>
          </el-tab-pane>
        </el-tabs>
        <!-- tabs end -->
        <!-- foot -->
        <div class="foot">
          <label for="che">
            <input
              type="checkbox"
              v-bind:checked="ked"
              id="che"
              style="margin-right:10px;"
              @click="quanxan"
            />全选
          </label>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import cnp from "../components/biaoti";
import saixuan from "../components/saixuan";
import tit from "../components/tit";
import biaotou from "../components/biaotou";
import biaoList from "../components/biao-list";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    cnp,
    saixuan,
    tit,
    biaotou,
    biaoList,
  },
  data() {
    //这里存放数据
    return {
      quan: false,
      inpVal: "",
      activeName: "first",
      ked: false,
      list: [
        {
          id: 1,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "取消订单"],
        },
        {
          id: 2,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "学习中",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "取消订单", "结束课程"],
        },
        {
          id: 3,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "已完成",
          time: "2019-01-25 10:55",
          operation: ["查看订单"],
        },
        {
          id: 4,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "已关闭",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 5,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 6,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 7,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 8,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 9,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
        {
          id: 10,
          choice: "",
          num: "2019030102369669",
          nickname: "Cassy",
          phone: "18541263699",
          name: "幼儿英语入门课程",
          course: "201920236",
          amount: "2399.00",
          status: "待付款",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "删除订单"],
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    quanxan() {
      if (this.quan) {
        this.quan = false;
      } else {
        this.quan = true;
      }
    },
  },
};
</script>
<style  scoped>
.oder {
  width: 1140px;
  height: 100%;
  margin: 0 auto;
}
.title {
  border-width: 0px;
  position: relative;
  /* left: 280px; */
  top: 0px;
  width: 97px;
  height: 36px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #9137f3;
  width: 97px;
}

.Order-main {
  margin: 0 auto;
  border-width: 0px;
  position: relative;
  top: 20px;
  width: 1100px;
  height: 1163px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  border-radius: 0px;
}
.tabs {
  position: relative;
  left: 50px;
  top: 30px;
  width: 1000px;
}
.foot {
  position: relative;
  top: 65px;
  left: 85px;
}
.fenye {
  float: right;
  margin-right: 120px;
}
</style>